import Vue from 'vue'
// 导入vuex
import Vuex from "vuex"
// 导入持久化插件
import createPersistedState from  "vuex-persistedstate"
// vue 使用vuex
Vue.use(Vuex)
// 创建vuex对象  就是状态仓库
const store = new Vuex.Store({
  // 状态  全局存储了一个count
  state() {
    return {
       count:1
    }
  },
  getters:{
   count10(state) {
      return state.count + 10
   }
  },
  mutations:{
    // 方法名 就是 mutations的类型
    // 无参数传递
     addCount(state) {
            state.count++;
     },
     // 有参数传递
    //  addCountN(state,payload) {
    //     console.log(payload);
    //     state.count += (payload.a + payload.b);
    //  }
     addCountN(state,{a,b}) {
        console.log(a,b);
        state.count += (a +b);
     }
  },
  actions:{
    // addCountAction(context) {
    //     // console.log(this);
    //     // console.log(context);
    //     context.commit('addCount')
    //     console.log("action 已经被执行....");

    // },
    //context 是vue的上下文对象 结构出需要的内容
    addCountAction({commit}) {
        setTimeout(() => {
            // console.log(this);
        // console.log(context);
        commit('addCount')
        }, 1000);
     

    },
    addCountActionN({commit},{a,b}) {
       // console.log("我被执行了...");
       commit('addCountN',{a,b})

    }
  },
  plugins:[
   createPersistedState({
      storage:window.localStorage,
      reducer(state) {
         // return {
         //    count:state.count
         // }
         return {
            ...state
         }
      }
   })
  ]

})

export default store;